<template>
    <div class="record">
        <van-nav-bar :title="$t('transaction.detail')" leftArrow @click-left="_return"/>
        <div class="main">
            <div class="amount">
                <van-row type="flex" justify="space-between" align="center">
                    <van-col>
                        <p>{{$t('transaction.amounts')}}<span>{{mine.oec_num}} AAT</span></p>
                    </van-col>
                </van-row>
                <ul>
                    <li>
                        <p>{{$t('transaction.rate')}}</p>
                        <span><b>1:{{mine.bilv}}</b></span>
                    </li>
                    <li>
                        <p>{{$t('transaction.time')}}</p>
                        <span>{{mine.add_time}}</span>
                    </li>
                </ul>
                <ul>
                    <li>
                        <p>{{$t('transaction.hand')}}</p>
                        <span><b>{{Number(mine.sxf_type).toFixed(4)}} </b>{{account}}</span>
                    </li>
                    <li>
                        <p>{{$t('transaction.price')}}</p>
                        <span><b>{{Number(mine.coin_num-mine.sxf_type).toFixed(4)}} </b>{{account}}</span>
                    </li>
                    <li>
                        <p>{{$t('transaction.status')}}</p>
                        <span>{{mine.status}}</span>
                    </li>
                </ul>
            </div>
            <div class="desc">
                <p>{{$t('transaction.solve')}}</p>
                <span>{{oeAddr}}</span>
            </div>
            <div class="desc">
                <p>{{$t('transaction.pay').replace(/ETH/,account)}}</p>
                <span>{{ethAddr}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        data() {
            return {
                oeAddr:'',
                mine:{},
                ethAddr:'',
                account: ''
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            getData(){
                this.$api.post('resonance/order',{id:this.inset})
                    .then(res =>{
                        this.mine = res.detail.gzorder
                        this.ethAddr = res.detail.gzadress
                        this.mine.add_time = moment(Number(this.mine.add_time*1000)).format('YYYY-MM-DD HH:mm:ss')
                        this.mine.status == 1 ? this.mine.status = this.$t('transaction.state_two') : this.mine.status = this.$t('transaction.state_one')
                        this.account = this.mine.coin_name.toUpperCase()
                    })
                this.$api.post('index/getZrAddr',{coin_name:'aat'})
                    .then(res =>{
                        this.oeAddr = res.detail.addr
                    })
            }
        },
        created() {
            this.getData()
        },
        mounted() {

        },
        props:{
            inset:{},
        }
    }
</script>

<style lang="stylus" scoped>
    bac = linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
    back = linear-gradient(90deg,rgba(203,175,137,1) 0%,rgba(219,200,170,1) 100%) !important
    font = #CBAF89
    fonts = #898989
    [class*=van-hairline]::after{
        border: none;
    }
    .main
        width 94%
        margin 0 auto
        .amount
            padding 0 10px
            background bac
            border-radius 5px
            .van-row
                padding 20px 0
                border-bottom 1px solid rgba(216,216,216,.1)
            .van-col
                p
                    color #FFFFFF
                    font-size 16px
                    span
                        color font
                        font-size 20px
                        margin-left 10px
                button
                    border 1px solid font
                    background none
                    color font
                    outline none
                    border-radius 25px
                    font-size 10px
                    padding 10px 20px

            ul
                margin-top 10px
                padding-bottom 10px
                li
                    display flex
                    display -webkit-flex
                    justify-content space-between
                    align-items center
                    padding 4px 0
                    p
                        font-size 12px
                        color #898989
                    span
                        font-size 12px
                        color #898989
                        b
                            font-weight normal
                            color font
            ul:not(:last-child)
                border-bottom 1px solid rgba(216,216,216,.1)

        .desc
            background bac
            border-radius 5px
            padding:15px
            margin-top 5px
            color #898989
            font-size 12px
            span
                display block
                margin-top 5px

</style>